<template>
<div class="mlogUpdate">
  <div class="studentSituation-header">{{'上传新日志'}}</div>
  <el-breadcrumb separator="/" class="studentDetail-headerbottom">
    <el-breadcrumb-item :to="{ path: '/mentor/mentorLog' }">导师日志</el-breadcrumb-item>
    <el-breadcrumb-item>上传新日志</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 表单 -->
  <div class="mluForm">
    <el-form :model="form" label-width="auto" label-position="top" style="max-width: 90%;">
      <el-form-item label="会议主题" required>
        <el-input v-model="form.name" placeholder="请输入会议主题"/>
      </el-form-item>

      <el-form-item label="会议日期" required>
        <el-col>
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="请选择会议日期"
            style="width: 100%"
          />
        </el-col>
    </el-form-item>

    <el-form-item label="上传会议照片" required>
      <el-upload
        style="width: 100%;"
        drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
      >
        <el-icon class="el-icon--upload">+</el-icon>
        <div class="el-upload__text">
          点击或拖拽文件到此处上传
        </div>
        <div class="el-upload__text">
          支持JPG、PNG格式，大小不超过5MB
        </div>
      </el-upload>
    </el-form-item>

    <el-form-item label="会议记录">
      <el-input
        v-model="form.content"
        style="width: 100%;"
        :autosize="{ minRows: 5, maxRows: 10 }"
        type="textarea"
        placeholder="请输入会议记录"
      />
    </el-form-item>

    </el-form>

    <div style="width: 85%;text-align: right;">
      <el-button type="primary" style="border-radius: 8px;padding: 23px;font-size: 17px;background-color: white;color: black;border: 1px solid #ccc;">取消</el-button>
      <el-button type="primary" style="border-radius: 8px;padding: 23px;font-size: 17px;background-color: #3352A5;">提交日志</el-button>
    </div>
  </div>

</div>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  name: '',
  date:'',
  content:''
})
</script>

<style scoped lang="scss">
.mlogUpdate {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .studentSituation-header {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    padding-left: 30px;
    border-top: 1px solid #c9c9ca;
    border-bottom: 1px solid #c9c9ca;
    background-color: #fff;
    font-size: 20px;
    font-weight: 600;
    color: #3352A5;
  }
  .studentDetail-headerbottom {
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    padding: 0 30px;
    font-size: 14px;
    :deep(.el-breadcrumb__inner) {
      font-weight: normal;
      color: #7f7f7f;
    }
  }

  .mluForm {
    width: 70%;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
    padding: 20px;
    transform: translateX(10%);
  }

}
:deep(.el-form-item__label) {
  color: #000;
  font-size: 16px;
}
:deep(.el-input__wrapper) {
  height: 40px;
}

</style>